<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实例一</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-color:darkgray;
			}
			#div1{
				position:relative;
				width:800px;
				height:600px;
				margin: 20px;
				background-color:white;
				cursor: move;
			}
			#div1 span{
				position:absolute;
				bottom:0;
				display:block;
				width:100px;
				height:30px;
				text-align:center;
				line-height:30px;
				color:red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var oDiv = document.getElementById("div1");
				var oSpan = oDiv.children[0];//获取子节点
				oDiv.onmousemove = function(e){
					var evt = e||event;
					var x = evt.clientX;
					var y = evt.clientY;
					oSpan.innerHTML = x + ","+ y +"px";
				}
				oDiv.onmouseout = function(){
					oSpan.innerHTML = "";
				}
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<span></span>
		</div>
	</body>
</html>
